<template>
  <el-form ref="form" :model="form" :rules="rules" label-width="120px" :disabled="isDetail">
    <el-button
      style="margin-bottom: 10px"
      type="primary"
      icon="el-icon-plus"
      size="small"
      @click="addfacilities"
    >新增
    </el-button
    >

    <el-table :data="form.facilitiesItemList" style="width: 100%">
      <el-table-column prop="name" label="设施名称">
        <template slot-scope="scope">
          <el-form-item
            label=""
            label-width="0"
            :prop="'facilitiesItemList.' + scope.$index + '.facilitiesId'"
            :rules="[
                  {
                    required: true,
                    message: '请选择房屋设施',
                    trigger: 'change',
                  },
                ]"
          >
            <el-select
              v-model="form.facilitiesItemList[scope.$index].facilitiesId"
              placeholder="请选择房屋设施"
              @change="handleFacilityChange($event, scope.$index)"
            >
              <el-option
                v-for="(facility, index) in facilitiesMap"
                :key="index"
                :label="facility.facilitiesName"
                :value="facility.facilitiesId"
              ></el-option>
            </el-select>
          </el-form-item>
        </template>
      </el-table-column>
      <el-table-column prop="amount1" label="数量">
        <template slot-scope="scope">
          <el-form-item
            label-width="0"
            label=""
            :prop="
                  'facilitiesItemList.' + scope.$index + '.facilitiesNumber'
                "
            :rules="[
                  {
                    required: true,
                    message: '请输入数量',
                    trigger: 'blur',
                  },
                ]"
          >
            <el-input
              v-model.number="
                    form.facilitiesItemList[scope.$index].facilitiesNumber
                  "
              placeholder="请输入"
              type="number"
            ></el-input>
          </el-form-item>
        </template>
      </el-table-column>
      <el-table-column prop="amount2" label="单价">
        <template slot-scope="scope">
          <el-form-item
            label=""
            label-width="0"
            :prop="
                  'facilitiesItemList.' + scope.$index + '.facilitiesPrice'
                "
            :rules="[
                  {
                    required: true,
                    message: '请输入单价',
                    trigger: 'blur',
                  },
                ]"
          >
            <el-input
              v-model.number="
                    form.facilitiesItemList[scope.$index].facilitiesPrice
                  "
              placeholder="请输入"
              type="number"
            ></el-input>
          </el-form-item>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            type="danger"
            size="mini"
            style="margin-bottom: 22px"
            @click="delfacilities(scope.$index)"
          >删除
          </el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </el-form>
</template>
<script>
import { houseManagerList, listProprietor } from '@/api/house/room'
import { compareDate } from '@/utils/common/moment'
import rules from '@/views/house/room/component/rules/room-add'
import { listFacilities } from '@/api/house/unmount'

export default {
  name: 'facility',
  dicts: [
    'cooperation_type',
    'charge_type'
  ],
  props: {
    isDetail: {
      type: Boolean,
      default: false
    },
    roomId: {
      type: String,
      default: ''
    },
    data: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      form: {
        facilitiesItemList: []
      },
      //设施列表
      facilitiesMap: [],
      rules: rules.apply(this),
    }
  },
  methods: {
    // 初始化表单数据
    init(){
      this.getfacilityList()
      this.resetForm()
      if(this.data){
        this.$nextTick(() => {
          this.form = JSON.parse(JSON.stringify(this.data))
        })
      }
    },
    // 重置表单
    resetForm() {
      this.$refs.form.resetFields()
      this.form = {
        facilitiesItemList: []
      }
    },
    //添加设施
    addfacilities() {
      console.log('addfacilities')
      let item = {
        facilitiesId: null,
        facilitiesName: null,
        facilitiesNumber: null,
        facilitiesPrice: null,
        facilitiesState: 1
      }
      this.form.facilitiesItemList.push(item)
    },
    //删除设施
    delfacilities(index) {
      this.form.facilitiesItemList.splice(index, 1)
    },
    /** 查询设施列表 */
    getfacilityList() {
      let params = {
        facilitiesType: 2 // 设施类型（1服务，2设施，3建筑，4卫浴，5餐厨，6娱乐）该页面写死传2
      }
      listFacilities(params).then((response) => {
        this.facilitiesMap = response.data
      })
    },
    /** 选择设施 */
    handleFacilityChange(value, index) {
      console.log('handleFacilityChange', value, index)
      let facilities = this.facilitiesMap.find(item => item.facilitiesId === value)
      this.form.facilitiesItemList[index].facilitiesName = facilities.facilitiesName
    },
    // 提交表单
    handleSubmit() {
      console.log('submit', this.form)
      this.$refs.form.validate((valid) => {
        if (!valid) return
        let formData = JSON.parse(JSON.stringify(this.form))
        this.$emit('submit', formData)
        this.resetForm()
      })
    }
  }
}
</script>


<style scoped lang="scss">
.form {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
</style>
